<!-- 购物车页面 -->
<template>
<div>
	<div class="head1">
		<carttop></carttop>
	</div>
	<div class="head2">
		<div class="head">
			<img :src="logo" alt="Logo Icon" class="logo-img" />  
			<div class="search">
				<input type="text" v-model="searchQuery" @input="handleSearch" placeholder="请输入搜索内容" style="height: 35px;width: 200px;padding: 3px 5px;border:1px solid #ff0000;">
				<button @click="performSearch" style="height: 35px;width: 45px;color: white;background-color: #c81623;border: #c81623;">搜索</button>  
			</div>
		</div>
	</div>
	<div class="main">
		<div class="main1">
			全部商品
		</div>
		<div class="main2">
			<div class="main2-1">
				 <el-checkbox v-model="isAllChecked" @change="handleAllCheckChange"></el-checkbox> 
				全选
			</div>
			<div class="main2-2">
				商品
			</div>
			<div class="main2-3">
				单价
			</div>
			<div class="main2-4">
				数量
			</div>
			<div class="main2-5">
				小计
			</div>
			<div class="main2-6">
				操作
			</div>
		</div>
		<div class="main3">
			<div v-if="filteredOrders.length === 0" class="empty-state">  
			      <img :src="emcar" alt="Logo Icon" class="emcar" />  
			    </div>  
			<div v-for="(good,index) in filteredOrders" :key="good.id" class="main3-1">
				<div class="main3-1-1">
					
					<div class="main3-1-1-2">
						{{good.shopName}}
					</div>
				</div>
				<div class="main3-1-2" :style="{ backgroundColor: good.isSelected ? '#fff4e8' : 'white' }"  >
					<div class="main3-1-2-1">
						<el-checkbox  v-model="good.isSelected" @change="() => {}"></el-checkbox>
					</div>
					<div class="main3-1-2-2">
							<img :src="Path.imgPath + good.imgs" alt="Cart Item" style="width: 83px; height: 83px;">	
					</div>
					<div class="main3-1-2-3">
						{{good.description}}
					</div>
					<div class="main3-1-2-4" style="width: 100px;">
						￥{{good.price}}
					</div>
					<div class="main3-1-2-5" style="width: 100px;">
						<el-input v-model="good.count" type="number"  size="small" min="1" :max="goodsStore[index]" style="width: 50px;"/>
					</div>
					<div class="main3-1-2-6">
						￥{{(good.price*good.count).toFixed(2)}}
					</div>
					<div class="main3-1-2-7">
						<a @click="deleteCart(good.id)">删除</a>
					</div>
				</div>
			</div>
		</div>
		<div class="main4">
			<div class="main4-1">
				<div class="main4-1-1">
					总价：
				</div>
				<div class="main4-1-2">￥
					<div v-if="totalPrice != null">
						{{totalPrice}}
					</div>
				</div>
			</div>
			<div class="main4-2">
				<el-button style="height: 50px;width: 120%;
				background-color: red;color: white;
				font-size: 18px;"
				@click="createOrders">生成订单</el-button>
			</div>
		</div> 
	</div>
	<div class="foot">
		<footerLzm></footerLzm>
	</div>
	</div>
</template>

<script setup>
import carttop from '@/views/top-zjm/cart-top.vue';
import footerLzm from '@/views/footer-lzm'
import { computed } from 'vue';
import { ref } from 'vue'
import { Path } from "@/constant/index"
import { get,post } from "@/plugins/axios"
import logo from '@/components/components-zjm/logo2.png'; 
import router from '@/router';
import { ElMessage } from 'element-plus';
import { useCartStore } from '@/stores/pinia';  
import emcar from '@/components/components-zjm/emcar.png'; 
import VueCookie from 'vue-cookies';
import { useUserStore } from '@/stores/pinia';
const cartStore = useCartStore(); 
const goods = ref([]);
const goodsStore = ref([]);
const userStore = useUserStore()
getCart()
function getCart(){
  if( !!VueCookie.get("token")){
			get(Path.cartGetByUid,{
			},content => {
				goods.value = content
				// 从数据库中获取当前商品的信息
				post(Path.getGoodsStore,{
					ids: getTargetId(goods)
				},content => {
					goodsStore.value = content
				})
			})
	}
}

function getTargetId(refArray){
	const array = refArray.value
	return array.filter( item => item.id !== undefined).map(item => item.id);
}

function deleteCart(id){
	post(Path.cartDeleteById,{
		cid: id
	},content => {
		getCart()
	})
}

// 处理全选逻辑  
const isAllChecked = ref(false);  
  
const totalPrice = computed(() => {  
  return goods.value.reduce((total, good) => {  
    if (good.isSelected) {  
      total += good.price * good.count;  
    }  
    return total;  
  }, 0).toFixed(2);
}); 


// 处理全选变化  
const handleAllCheckChange = (value) => {  
	goods.value.forEach(good => {  
		good.isSelected = value;  
	});  
};  

const searchQuery = ref('');
const filteredOrders = computed(() => {  
	let filtered = goods.value;  	
	  if (searchQuery.value.trim() !== '') {  
	      filtered = filtered.filter(good => {  
	        return (  
	          // good.order_number.toLowerCase().includes(searchQuery.value.toLowerCase()) ||  
	          good.description.toLowerCase().includes(searchQuery.value.toLowerCase())  
	        );  
	      });  
	    }  
  return filtered;  
});  	

const selectedGoods = computed(() => {  
  return goods.value.filter(good => good.isSelected);  
});  

function createOrders(){
	if(selectedGoods.value.length == 0){
		ElMessage.warning("请选择商品")
		return
	} 
	console.dir(selectedGoods.value)
	cartStore.setSelectedGoods(selectedGoods.value) 
	console.dir(cartStore.selectedGoods)
	router.push("/settlement")
}

</script>

<style scoped lang="scss">
	.head{
		height: 97px;
		display: flex;
		align-items: center;
		padding:0% 15%;
		background-color: #ffffff;
		.logo-img{
			height: 100%;
			width: auto;
		
		}
		.search{
			margin-left: 43%;
			display: flex;
			justify-content: space-between;
		}
	}
	.main{
	padding-left: 15%;
	padding-right: 15%;
	padding-top: 2.5%;
		.main1{
			font-weight: 800;
		}
		.main2{
			height: 42.8px;
			background-color: #f3f3f3;
			margin-top: 20px;
			display: flex;
			align-items: center;
			font-size: 14px;
			.main2-1{
				margin-left: 2%;
			}
			.main2-2{
				margin-left: 6%;
			}
			.main2-3{
				margin-left: 40%;
			}
			.main2-4{
				margin-left: 10%;
			}
			.main2-5{
				margin-left: 10%;
			}
			.main2-6{
				margin-left: 7%;
			}
		}
		.main3{
			height: auto;
			margin-top: 20px;
			.main3-1{
				.main3-1-1{
					padding-left: 1%;
					border-bottom:  2px solid #797979;
					height: 30px;
					background-color: white;
					display: flex;
					align-items: center;
				.main3-1-1-1{
					margin-left: 1%;
				}
					.main3-1-1-2{
						
						margin-left: 2%;
						font-size: 13px;
						color: #535353;
						font-weight: 900;
					}
				}
				
				.main3-1-2{
					height: 118.4px;
					display: flex;
					padding-left: 2%;
					padding-top: 1.3%;
					.main3-1-2-2{
						
						margin-left: 2%;
					}
					.main3-1-2-3{
						width: 35%;
						margin-left: 2%;
						font-size: 13px;
					}
					.main3-1-2-4{
						margin-left: 5%;
						font-size: 15px;
					}
					.main3-1-2-5{
						margin-left: 6%;
					}
					.main3-1-2-6{
						margin-left: 2%;
						font-size: 15px;
					}
					.main3-1-2-7{
						margin-left: 4.7%;
						font-size: 15px;
						a{
							text-decoration: none;
							color: #5d5d5d;
							font-size: 15px;
							&:hover {
							  color: #ff0000;  
							}  
						}
					}
				}
			}
		}
		.main4{
			
			height:50px;
			display: flex;
			align-items: center;
			.main4-1{
				
				.main4-1-1{
					margin-left: 80%;
				}
				.main4-1-2{
					display: flex;
				}
				border: 1px solid #7e7e7e;
				display: flex;
				height: 100%;
				width: 91%;
				align-items: center;
			}
			.main4-2{
				.el-button{
					height: 100%;
				}
			}
		}
	}
</style>